<script setup lang="ts">
import {Dayjs} from "dayjs";
import BatchSelection from "~/contentScripts/views/wxt/components/BatchSelection.vue";
import DateRangeSelection from "~/contentScripts/views/wxt/components/DateRangeSelection.vue";
import RefreshButton from "~/contentScripts/views/wxt/components/RefreshButton.vue";
import {WxtBizCode, WxtPageFields, WxtUtils} from "~/contentScripts/views/wxt/lib/wxtUtils";
import DeletePlan from "~/contentScripts/views/wxt/SuperOptimization/KeywordPromotion/DeletePlan.vue";
import GoodsOperationUnitTable
  from "~/contentScripts/views/wxt/SuperOptimization/KeywordPromotion/GoodsOperationUnitTable.vue";
import OperationRecords from "~/contentScripts/views/wxt/SuperOptimization/KeywordPromotion/OperationRecords.vue";
import ProfitLossCalculator
  from "~/contentScripts/views/wxt/SuperOptimization/KeywordPromotion/ProfitLossCalculator.vue";
import PromotionStatus from "~/contentScripts/views/wxt/SuperOptimization/KeywordPromotion/PromotionStatus.vue";

// const campaignGroupFindListData = ref([]);
// const loadGroup = () => {
//   WxtUtils.campaignGroupFindList(bizCode).then(res => {
//     campaignGroupFindListData.value = res.data.data.list;
//   });
// }
// loadGroup();
const props = defineProps({
  bizCode: {
    type: String as PropType<WxtBizCode>,
    default: WxtBizCode["消费者运营-拉新快"],
  },
});
const data = ref<any[]>([]);
const loading = ref(false);
const onLoading = ref<any[]>([]);
const loadAdgroupHorizontalFindPage = async (offset: number = 0, pageSize: number = 100) => {
  if (onLoading.value.includes(offset)) {
    return;
  }
  if (offset === 0){
    rows.value = [];
    data.value = [];
    loading.value = true;
    onLoading.value = [];
  }
  onLoading.value.push(offset);
  WxtUtils.adgroupHorizontalFindPage(adZonePkgIdList.value, dateRange.value[0].format('YYYY-MM-DD'), dateRange.value[1].format('YYYY-MM-DD'), props.bizCode, WxtPageFields.消费者运营,offset,pageSize).then(res => {
    res.data.data.list.map((l: any) => {
      // l.showTagListName = l.showTagList.map((t: any) => t.name).join(',');
      if (l.reportInfoList && l.reportInfoList.length) {
        // 间接ROI
        l.reportInfoList[0].indirRoi = l.reportInfoList[0].roi - l.reportInfoList[0].dirRoi;
        // 直接转化率
        l.reportInfoList[0].dirCvr = l.reportInfoList[0].alipayDirNum / l.reportInfoList[0].click;
        // 间接转化率
        l.reportInfoList[0].indirCvr = l.reportInfoList[0].alipayIndirNum / l.reportInfoList[0].click;

        // 直接加购率
        l.reportInfoList[0].dirAddRate = l.reportInfoList[0].cartDirNum / l.reportInfoList[0].click;
        // 间接加购率
        l.reportInfoList[0].indirAddRate = l.reportInfoList[0].cartIndirNum / l.reportInfoList[0].click;

        // 直接收藏率
        l.reportInfoList[0].dirFavRate = l.reportInfoList[0].itemColDirNum / l.reportInfoList[0].click;
        // 间接收藏率
        l.reportInfoList[0].indirFavRate = l.reportInfoList[0].itemColIndirNum / l.reportInfoList[0].click;
        //  直接收藏加购率
        l.reportInfoList[0].dirFavAddRate = l.reportInfoList[0].dirFavRate + l.reportInfoList[0].dirAddRate;
        // 间接收藏加购率
        l.reportInfoList[0].indirFavRate = l.reportInfoList[0].indirFavRate + l.reportInfoList[0].indirAddRate;
      }else {
        l.reportInfoList = null;
      }
    });
    // data.value = data.value.concat(res.data.data.list);
    // 将获取到的数据res.data.data.list 追加到data.value
    data.value = data.value.concat(res.data.data.list);
    if (res.data.data.list.length === pageSize) {
      loadAdgroupHorizontalFindPage(offset + pageSize, pageSize);
    }
    onLoading.value = onLoading.value.filter(e => e !== offset);
  }).finally(() => {
    loading.value = false;
  });
}
const rows = ref<any[]>([]);
const adZonePkgIdList = ref<any[]>([])
const campaignGroupFindList = ref<any[]>([])
const dateRange = ref<Dayjs[]>([])
watch(() => dateRange.value, (val) => {
  if (val.length == 2 && adZonePkgIdList.value.length) {
    nextTick(() => loadAdgroupHorizontalFindPage());
  }
}, {
  deep: true
})
watch(() => adZonePkgIdList.value, (val) => {
  if (val.length) {
    nextTick(() => loadAdgroupHorizontalFindPage());
  }
}, {
  deep: true
})
watch(() => campaignGroupFindList.value, (val) => {
  if (val.length) {
    nextTick(() => loadAdgroupHorizontalFindPage());
  }
}, {
  deep: true
})
watch(()=>props.bizCode,(val)=>{
  nextTick(() => loadAdgroupHorizontalFindPage());
})
</script>

<template>
  <a-row style="padding-bottom: 10px;" type="flex" :gutter="10">
    <a-col>
      <a-space>
        <BatchSelection :items="WxtUtils.adZonePkgIdList" name="流量来源" v-model:value="adZonePkgIdList" confirm/>
        <!--        <BatchSelection v-if="campaignGroupFindListData.length" :items="campaignGroupFindListData" name="计划组"-->
        <!--                        v-model:value="campaignGroupFindList" value-name="campaignGroupId"-->
        <!--                        label-name="campaignGroupName"-->
        <!--        />-->
        <DateRangeSelection name="日期" v-model:value="dateRange"/>
      </a-space>
    </a-col>
    <a-col flex="1" style="overflow-x: auto;">
      <a-space>
        <RefreshButton :loading="loading" @refresh="loadAdgroupHorizontalFindPage"/>
        <ProfitLossCalculator/>
        <!--        <BatchOptimizationPlan :rows="rows"/>-->
<!--        <KeywordUnitReportComparison name="主体" :rows="rows" :biz-code="bizCode" :date-range="dateRange"-->
<!--                                     :pageFields="WxtPageFields.精准人群推广"-->
<!--        />-->

        <!--        <PlanningGroup :rows="rows" :biz-code="bizCode" @load-group="loadGroup"/>-->
<!--        <ResourceAllocation :rows="rows" :biz-code="bizCode"-->
<!--                            :static-ad-pkg-lists="WxtUtils.adZonePkgIdList"-->
<!--        />-->
<!--        <IntelligentPriceAdjustment :rows="rows" :biz-code="bizCode" @refresh="loadAdgroupHorizontalFindPage"/>-->
<!--        <PlacementArea :rows="rows"/>-->
<!--        <WeatherRegionOptimization :rows="rows" @refresh="loadAdgroupHorizontalFindPage"/>-->
<!--        <TimeDiscount :rows="rows" :biz-code="bizCode" @refresh="loadAdgroupHorizontalFindPage"/>-->
<!--        <BudgetBiddingMethod :rows="rows" @refresh="loadAdgroupHorizontalFindPage" :biz-code="bizCode"/>-->
        <PromotionStatus :rows="rows" type="unit" @refresh="loadAdgroupHorizontalFindPage" :biz-code="bizCode"/>
        <OperationRecords :rows="rows" type="unit" :dates="dateRange" :biz-code="bizCode"/>
        <DeletePlan :rows="rows" name="主体" type="unit" @refresh="loadAdgroupHorizontalFindPage" :biz-code="bizCode"/>
      </a-space>
    </a-col>
  </a-row>
  <a-row style="flex:1;">
    <GoodsOperationUnitTable :date-range="dateRange" @refresh="loadAdgroupHorizontalFindPage" :loading="loading"
                         :data="data"
                         name="主体"
                         v-model:rows="rows"
    />
  </a-row>
</template>

<style scoped>

</style>
